<template>
    <el-container :style="body_style">
        <el-main>
            <el-col :md="6" :offset="9" class="login_box">
                <h1>考了个试用户注册</h1>
                <el-form ref="login_form">
                    <el-form-item label="用户名">
                        <el-input placeholder="请输入用户名" v-model="register_form.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="用户密码">
                        <el-input placeholder="请输入用户密码" type="password" v-model="register_form.userPassword"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="btn_block" @click="register" v-loading="reg_btn_loading">注册</el-button>
                        <p>已经有账户了?<router-link to="/login">点击登录</router-link></p>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-main>
    </el-container>
</template>

<script>
import { user_register } from "@/api/user"

export default {
    name: "login",
    data() {
        return {
            reg_btn_loading: false,
            body_style: {
                height: '100%',
                backgroundImage:"url("+require("@/assets/images/login_bg.jpg")+")",
                backgroundSize: "auto 100%",
                backgroundPosition: "center"
            },
            register_form: {
                userName:"",
                userPassword:""
            }
        }
    },
    methods: {
        register() {
            this.reg_btn_loading = true
            user_register(this.register_form).then((res) => {
                if(res.code == 200){
                    this.$message("注册成功")
                    this.$router.push("/login")
                }else{
                    this.$message("注册失败")
                }
            }).catch(error => {
                this.$message({
                    type: "warning",
                    message: "网络错误"
                })
                console.log(error)
            }).finally(()=>{
                this.reg_btn_loading = false
            })
        },
    },
    created() {},
};
</script>

<style scoped>
.login_box {
    background-color:rgba(240,240,240,0.8);
    padding: 10px 20px;
    margin-top: 15%;
    border-radius: 6px;
}
.btn_block {
    display: block;
    width: 100%;
}
</style>